<template>
    <div class="row color-wrap">
        <div class="col-md-6 col-md-offset-3  login-body">
			<div class="panel panel-login">
						<div class="panel-heading">
							<div class="row">
								<div class="col-xs-6 ">
									<a @click="login" class="active cursor-pointer" id="login-form-link">登录</a>
								</div>
								<div class="col-xs-6">
									<a @click="register" class="cursor-pointer" id="register-form-link">注册</a>
								</div>
							</div>
							<hr>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									<form id="login-form"  role="form" style="display: block;">
										<div class="form-group">
											<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="账号" v-model="loginObj.username">
										</div>
										<div class="form-group">
											<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="密码" v-model="loginObj.password">
										</div>
										<!--<div class="form-group text-center">
											<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
											<label for="remember">记住我</label>
										</div>-->
										<div class="form-group">
											<div class="row">
												<div class="col-sm-6 col-sm-offset-3">
													<input type="button" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="登录" @click="login_submit">
												</div>
											</div>
										</div>
									</form>
									<form id="register-form" role="form" style="display: none;">
										<div class="form-group">
											<input type="text" name="name" id="name" tabindex="1" class="form-control" placeholder="用户名" v-model="registerObj.name">
										</div>
										<div class="form-group">
											<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="账号" v-model="registerObj.username">
										</div>
										<div class="form-group">
											<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="密码" v-model="registerObj.password">
										</div>
										<div class="form-group">
											<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="再次输入密码" v-model="registerObj.repassword">
										</div>
										<div class="form-group">
											<div class="row">
												<div class="col-sm-6 col-sm-offset-3">
													<!--<input type="button" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="注册" @click="register_submit">-->
													<input type="button" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="注册" @click="register_submit">
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
    </div>
</template>

<script>
	import { Message } from 'element-ui';
    export default {
		props:['WebRTC'],
		data(){
			return {
				loginObj:{
					username:null,
					password:null
				},
				registerObj:{
					username:null,
					password:null,
					repassword:null,
					name:null
				},
				// tmpObj:null
			}
		},
		beforeMount(){
			// if(this.$parent.permision_lock){
			// 	this.$route.push("/Chat");
			// }
		},
		methods:{
			login:function(e){
				// if(this.tmpObj != null){
				// 	this.loginObj = this.tmpObj;
				// 	this.tmpObj = null;
				// }else{
				// 	this.loginObj = {
				// 		username:null,
				// 		password:null
				// 	}
				// }

				this.loginObj = {
						username:null,
						password:null
					}

				$("#login-form").delay(100).fadeIn(100);
				$("#register-form").fadeOut(100);
				$('#register-form-link').removeClass('active');
				$("#login-form-link").addClass('active');
				// e.preventDefault();
			},
			register:function(e){
				this.registerObj = {
					name:null,
					username:null,
					password:null,
					repassword:null
				}

				$("#register-form").delay(100).fadeIn(100);
				$("#login-form").fadeOut(100);
				$('#login-form-link').removeClass('active');
				$("#register-form-link").addClass('active');
				// e.preventDefault();
			},
			login_submit:function(){
				let self = this;
				$.ajax({
					type:'POST',
					// async:true,
					url:domain+'/user/login',
					data:this.loginObj,
					dataType:'json',
					xhrFields:{
						withCredentials:true
					},
					crossDomain:true,
					success:function(data){
						if("success" == data.code){
							self.$parent.host = data.data;
							self.$parent.permision_lock = true;
							self.WebRTC.reinit();
							Message.success("登录成功，页面准备跳转");
							setTimeout(function(){
								self.$router.push('/chat');
								Message.closeAll();
							},2000);
						}else{
							Message({
								message:'账号或密码有误',
								type:'error'
							});
						}
					}
				});
			},
			register_submit:function(){
				let self = this;
				$.ajax({
					type:'POST',
					url:domain+'/user/register',
					data:this.registerObj,
					dataType:'json',
					success:function(e){
						// if("success" == e.code){
						// 	Message.success("注册并登录成功，页面准备跳转");
						// 	self.WebRTC.reinit();
						// 	setTimeout(function(){
						// 		self.$router.push('/chat');
						// 		Message.closeAll();
						// 	},2000);
						// }else{
						// 	Message({
						// 		message:'输入信息有误',
						// 		type:'error'
						// 	});
						// }
						switch(e.code){
							case 'success':
								Message.success("注册成功,请登录");
								self.loginObj = self.registerObj;
								// self.tmpObj = self.registerObj;
								// self.login();
								self.login_submit();
							break;
							case 'error-name-null':
							case 'error-username-null':
							case 'error-repassword-null':
							case 'error-password-null':
								Message.error(e.msg);
							break;
							case 'error-username-duplicate':
								Message.error("账号已存在，请重新输入");
								self.registerObj.username = null;
							break;
							case 'error-password-twice':
								Message.error(e.msg);
								self.registerObj.password = null;
								self.registerObj.repassword = null;
							break;
						}
					}
				});
			},
			test:function(){
				$.ajax({
					type:'POST',
					url:domain+'/user/test',
					data:this.registerObj,
					dataType:'json',
						xhrFields:{
						withCredentials:true
					},
					success:function(e){
						if("success" == e.code){
							self.$router.push('/chat/147');
						}else{
							alert(e);
						}
					},
					error:function(e){
						console.log(e);
					}
				});
			}
		}
    }
</script>

<style src="../css/login.css" scoped></style>
<style scoped>
.color-wrap{
	height: 100%;
	background-color:#f7fafc
}
.cursor-pointer{
	cursor: pointer;
}
</style>